<template>
  <div id="Header">
  	<router-link :to="{path:'/'}" v-show="showAbs">
	    <div class="header-abs">
	    	<div class="iconfont header-abs-back">&#xe624;</div>
	    </div>
	</router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
    	<router-link :to="{path:'/'}" tag="div">
    		<div class="iconfont header-icon">&#xe624;</div>
    	</router-link>
    	景点详情
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data(){
  	return{
  		showAbs:true,
  		opacityStyle:{
  			opacity:0
  		}
  	}
  },
  methods:{
  	handleScroll(){
  		const top = document.documentElement.scrollTop;
  		if(top > 60){
  			let opacity = top / 140;
  			opacity = opacity > 1 ? 1 : opacity;
  			this.opacityStyle.opacity = opacity;
  			this.showAbs = false;
  		}else{
  			this.showAbs = true;
  		}
  	}
  },
  activated:function(){
  	window.addEventListener('scroll',this.handleScroll);
  },
  deactivated:function(){
    window.removeEventListener('scroll',this.handleScroll);
  }
}
</script>

<style scoped>
.header-abs{
	position: absolute;
	left: .2rem;
	top: .2rem;
	width: .8rem;
	height: .8rem;
	border-radius: .4rem;
	background-color: rgba(0, 0, 0, .8);
	text-align: center;
	line-height: .8rem;
}
.header-abs-back{
	color: #fff;
	font-size: .4rem;
}
.header-fixed{
	height: .86rem;
	line-height: .86rem;
	text-align: center;
	color: #fff;
	background-color: #00bcd4;
	font-size: .32rem;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
  z-index: 2;
}
.header-icon{
	position: absolute;
	top: 0;
	left: 0;
	width: .64rem;
	text-align: center;
	font-size: .4rem;
}
</style>